---
import Card from "#/components/Card.astro"
import TextA from "#/components/TextA.astro"
import { socialLinks } from "#/lib/constants/socials.ts"
import { Icon } from "astro-icon/components"
---

<section class="bg-black mb-px flex flex-col items-center justif-center">
  <div class="flex-1 max-w-4xl">
    <p class="text-4xl mb-4 font-normal text-center text-white">
      Join the Union
    </p>
    <div class="grid grid-cols-1 md:grid-cols-3">
      {
        socialLinks.map((socialLink) => (
          <a
            href={socialLink.href}
            target="_blank"
            rel="noopener noreferrer"
            class="flex flex-col flex-1 p-7 text-center"
          >
            <Card>
              <Icon
                name={socialLink.icon}
                class="mx-auto"
                size="2.5rem"
              />
              <TextA fake>{socialLink.cta}</TextA>
            </Card>
          </a>
        ))
      }
    </div>
  </div>
</section>
